<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <router-link :to="path">
        <span class="back-link"><svg-icon icon-class="ds-left-double-arrow" /> 返回</span>
      </router-link>
    </div>
    <el-form label-position="left" label-width="100px" style="margin-top:10px">
      <el-row :gutter="20">
        <component :is="orderInfo" :info="info"></component>
        <el-col :span="8">
          <div class="order-box">
            <component :is="historyView"></component>
          </div>
        </el-col>
      </el-row>
			<el-row>
				<component :is="orderHistory"></component>
			</el-row>
    </el-form>
  </div>
</template>

<style>
  .bankcard .el-form-item label {
    color: #999;
    font-weight: normal;
  }
  .bankcard .el-form-item div {
    color: #4d4d4d;
  }
  .order-dialog {
    background: none;
    background-color: none;
    box-shadow: 0 0 0;
  }
  .radio-box label {
    float: none;
    margin-left: 10px;
  }
  .radio-box .el-form-item__content {
    margin-left: 10px;
  }
  .order-card .el-card__body {
  	padding: 0 20px!important;
  }
  .order-card .el-form-item__label {
  	color: #999;
  	font-weight: normal;
  }
  .order-card .el-form-item__content {
    color: #4d4d4d;
  }
  .el-form-item__label {
    width: auto !important;
  }
  .check-group {
    margin-top: 10px;
    margin-bottom: 0px!important;
    padding-bottom: 0px!important;
  }
  .check-group .el-radio-button--medium .el-radio-button__inner {
    border-color: #45b9fe;
  }
  .check-group .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    background-color: #45b9fe;
  }
  .order-box {
    background-color: #f5f5f5;
    padding: 20px;
    height: 1130px;
    overflow: auto;
  }
  .order-box .el-tabs__content {
    height: 1018px;
    overflow: auto;
  }
  .order-box .el-tabs--border-card>.el-tabs__content{
  	padding: 10px 0;
  }
  /* 检查项样式 */
  .textarea .el-form-item__content{
  	margin: 30px 0 0 0 !important;
  	padding: 20px 0 0 0;
  }
  .el-textarea{
    width: 90%;
  }
  .textarea .el-form-item__label {
    text-indent: 5px;
    color: #858585;
    font-size: 16px;
    width: 100%;
    font-weight: bold;
  }
  .textarea .el-form-item__label:before {
    content: "" !important;
    display: inline-block;
    width: 4px;
    height: 16px;
    background: #109ef0;
    position: relative;
    top: 2px;
    left: -5px;
  }
  .el-textarea__inner{
  	height: 120px;
  }
</style>

<script>
// import { mapGetters } from 'vuex'
import { orderDetail } from '@/api/order'
import orderinfo from './components/orderinfo' // 订单详情组件
import orderhistory from './components/orderhistory' // 订单审核记录和邀请家人记录组件
import historyView from './components/historyView' // 审核记录组件

export default {
  components: { orderinfo, orderhistory, historyView },
  data() {
    return {
      id: this.$route.params.id,
      info: {
        'account_info': {},
        'ensure_info': {},
        'guarder_info': {},
        'order_info': {},
        'pay_info': {}
      },
      path: '/order/history',
      orderInfo: 'orderinfo',
      orderHistory: 'orderhistory',
      historyView: 'historyView'
    }
  },
  created() {
    this.getInfo()
  },
  watch: {
    '$route'(to, from) {
      // 对路由变化作出响应...
      this.id = this.$route.params.id
      this.getInfo()
    }
  },
  methods: {
    getInfo() {
      orderDetail(this.id).then(response => {
        this.info = response.data
      })
    }
  }
}
</script>
